//字体
@text-YaHei:"雅黑","微软雅黑","Microsoft YaHei";

// Grayscale
@black-10:                 darken(#fff, 10%);
@black-20:                 darken(#fff, 20%);
@black-30:                 darken(#fff, 30%);
@black-40:                 darken(#fff, 40%);
@black-50:                 darken(#fff, 50%);
@black-60:                 darken(#fff, 60%);
@black-70:                 darken(#fff, 70%);
@black-80:                 darken(#fff, 80%);
@black-90:                 darken(#fff, 90%);

// Brand colors
@brand-primary:           #428bca;
@brand-success:           #5cb85c;
@brand-warning:           #f0ad4e;
@brand-danger:            #d9534f;
@brand-info:              #5bc0de;

// Scaffolding
@body-background:         #fff;
@text-color:              @black-50;

// Links
@link-color:              @brand-primary;
@link-color-hover:        darken(@link-color, 15%);

@input-color-placeholder: lighten(@text-color, 25%);
@input-height:30;

//清除浮动
.clearfix() {
	*zoom: 1;
	&:before,
	&:after {
		display: table;
		content: "";
		// Fixes Opera/contenteditable bug:
		// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
		line-height: 0;
	}
	&:after {
		clear: both;
	}
}

//背景色透明 rgba
.background-rgba(@red, @green, @blue, @alpha:1){
	@filtercolor:`(_f = function(d){ var v = (parseInt(d)|0).toString(16);return v.length<2 ? "0"+v : v;},'#'+_f(@{alpha}*255) + _f(@{red}) + _f(@{green})+ _f(@{blue}))`;
	background-color: ~'rgba(@{red},@{green},@{blue},@{alpha})';
	-ms-filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{filtercolor}',endColorstr='@{filtercolor}')";
	filter:~"progid:DXImageTransform.Microsoft.gradient(startColorstr='@{filtercolor}',endColorstr='@{filtercolor}')";
}

//background-size 背景尺寸
.background-size(@background-size: auto){
	-moz-background-size: @background-size;
	-webkit-background-size: @background-size;
	-o-background-size: @background-size;
	background-size: @background-size;
}

//png24透明
//.png24(#ccc, "http://taobao.com/logo.jpg");

.png24(@color, @url){
	background: @color url("@{url}") no-repeat 0 0;
    _background: @color none;
    _filter: ~"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='@{url}', sizingMethod='scale')";
}

//圆角
.border-radius(@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
}
//单角圆角
.border-top-left-radius(@radius: 5px) {
	-webkit-border-top-left-radius: @radius;
	-moz-border-radius-topleft: @radius;
	border-top-left-radius: @radius;
}
.border-top-right-radius(@radius: 5px) {
	-webkit-border-top-right-radius: @radius;
	-moz-border-radius-topright: @radius;
	border-top-right-radius: @radius;
}
.border-bottom-right-radius(@radius: 5px) {
	-webkit-border-bottom-right-radius: @radius;
	-moz-border-radius-bottomright: @radius;
	border-bottom-right-radius: @radius;
}
.border-bottom-left-radius(@radius: 5px) {
	-webkit-border-bottom-left-radius: @radius;
	-moz-border-radius-bottomleft: @radius;
	border-bottom-left-radius: @radius;
}

//单边圆角
.border-top-radius(@radius: 5px) {
	.border-top-right-radius(@radius);
	.border-top-left-radius(@radius);
}
.border-right-radius(@radius: 5px) {
	.border-top-right-radius(@radius);
	.border-bottom-right-radius(@radius);
}
.border-bottom-radius(@radius: 5px) {
	.border-bottom-right-radius(@radius);
	.border-bottom-left-radius(@radius);
}
.border-left-radius(@radius: 5px) {
	.border-top-left-radius(@radius);
	.border-bottom-left-radius(@radius);
}

//box 阴影
.box-shadow(@shadow: 5px 5px 10px #cccccc) {
	-webkit-box-shadow: @shadow;
	-moz-box-shadow: @shadow;
	box-shadow: @shadow;
}

//content-box padding-box border-box
.box-sizing(@boxmodel: content-box) {
	-webkit-box-sizing: @boxmodel;
	-moz-box-sizing: @boxmodel;
	box-sizing: @boxmodel;
}

//透明
.opacity(@opacity: 80) {
	opacity: @opacity / 100;
	filter: ~"alpha(opacity=@{opacity})";
}

//horizontal, vertical, both
.resizable(@direction: both) {
	resize: @direction;
	overflow: auto; // Safari fix
}

.text-shadow(@shadow: 5px 5px 5px #333){
	text-shadow: @shadow;
}

//透明边框
.transparent-border(@width:5px){
	border: ~"@{width} solid transparent";
	_border-color:#FF00FF; _filter:chroma(color=#FF00FF);
	vertical-align: middle;
	display: inline-block;
	width: 0;
	height: 0;
	overflow: hidden;
}

//水平线性渐变
.linear-x(@start-color, @end-color, @start-percent: 0%, @end-percent: 100%){
	background-image: -webkit-gradient(linear, @start-percent left, @end-percent left, from(@start-color), to(@end-color)); // Safari 4+, Chrome 2+
	background-image: -webkit-linear-gradient(top, color-stop(@start-color @start-percent), color-stop(@end-color @end-percent)); // Safari 5.1+, Chrome 10+
	background-image: -moz-linear-gradient(top, @start-color @start-percent, @end-color @end-percent); // FF 3.6+
	background-image:  linear-gradient(to bottom, @start-color @start-percent, @end-color @end-percent); // Standard, IE10
	background-repeat: no-repeat;
	filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start-color),argb(@end-color))); // IE9 and down
	&:hover{ background-color: @start-color; background-position: 0 100px;}
	&:active{ background-color: @end-color; background-position: 0 100px;}
}

//
.kv-line(@w,@h,@split:10,@num:~''){
	@left:@w + @split;
	@hpx:~'@{h}px';
	.clearfix();
	.key@{num}{ float: left; line-height: @hpx; width: ~'@{w}px';}
	.value@{num}{ margin-left: ~'@{left}px'; line-height: @hpx; min-height: @hpx; _height: @hpx;}
}

@outer-border-color:@brand-info;
//输入框
.text-input(@h,@bg:#FFFFFF,@outer:@outer-border-color){
	padding: 0 5px; vertical-align: middle;
	@p : (@h - 22) / 2;
	@i : @h - 4;
	@b : darken(@bg,20%);
	& input,& textarea{border: 1px solid @b; line-height: 20px; height: 20px; width: 100%; padding: ~"@{p}px" 4px; margin: 0 -5px; background-color: @bg; box-shadow: inset 0 8px 8px -8px @b; outline: none; overflow: hidden;}
	& textarea{ overflow: auto;}
	& input:hover,& textarea:hover{ border-color: @outer;}
	& input:focus,& input:active,& textarea:focus,& textarea:active{box-shadow: inset 0 8px 8px -8px @b, 0 0 4px @outer; border-color: @outer;}
	& textarea{ line-height: 18px; height: auto; resize: none;}
//	span&{ display: inline-block;}
//	& i,& em{ display: block; height: ~"@{i}px"; line-height: ~"@{i}px"; margin: 2px; background-color:@bg; width: 28px; position: absolute; *top:1px; box-shadow: inset 0 8px 8px -8px @b; font-style: normal; text-align: center;}
//	& i.auto,& em.auto{ width: auto; padding: 0 3px;}
//	& em{ right: 0;}
//	& i{ left:0;}
}

//按钮
.button(@h,@bg:#FFFFFF,@mw:100){
	@lh : @h - 2;
	@p : @h - 10;
	@mwpx : ~'@{mw}px';
	@lhpx : ~"@{lh}px";
	@color: contrast(@bg, black, white, 43%);
	//2px 2px 6px rgba(0,0,0,0.2)
	color: @color; min-width: @mwpx; _width: @mwpx; height: @lhpx; line-height: @lhpx; background-color: @bg; border:1px solid darken(@bg,20%);
	display: inline-block; vertical-align: middle; margin: 0; text-decoration: none; text-align: center; font-size:16px; cursor: pointer; outline: none; font-weight: 600; overflow: hidden;
//	input&,button&{height: ~"@{h}px"; font-weight: normal;}
//	&:hover{ background-color: lighten(@bg,10%); text-decoration: none; color: @color;}
//	&:active{ background-color: darken(@bg,10%); color: @color;}
}

//选择框
.select(@h,@bg:#FFFFFF,@outer:@outer-border-color){
	@p : (@h - 24) / 2;
	@b : darken(@bg,20%);
	border: 1px solid @b; display: inline-block; padding: ~"@{p}px" 4px; height: 22px; line-height: 22px; overflow: hidden; outline-color: @outer; vertical-align: middle;
	& .cc{ display: inline-block; border:1px solid transparent; _border:1px solid @bg; background-color: transparent; _background-color: @bg; overflow: hidden; height: 20px;}
	& select{margin: -1px; height: 22px; padding: 0; line-height: 22px; border:1px solid @bg; outline: none; float: left; background: transparent;}
	&:hover{ border-color: @outer;}
	&:focus,&:active{ border-color: @outer;}
	//	@xx:`(void function(){return ""}())`;
}


//进度
.progress-bg(@c:@outer-border-color){
	background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
	background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
	background-size: 40px 40px;
	background-color: @c;
}

//数字循环
.loop-width(@num,@width,@name:span) when (@num > 0){
	.@{name}@{num}{
		width: @num*@width; display: block;
	}
	.loop-width(@num - 1,@width,@name);
}